<template>
  <div>
    <!-- 订单内容组件 -->
    <orderform ref="orderForm" :content="order.tooths[0]" />

    <el-form ref="form" :model="order" :rules="rules" size="small" label-width="120px">
      <el-form-item label="交付时间" prop="complationTime">
        <el-date-picker
          v-model="order.complationTime"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="委托类型">
        <el-radio-group v-model="order.trustMethod">
          <el-radio-button label="0">平台委派</el-radio-button>
          <el-radio-button label="1">抢单</el-radio-button>
          <el-radio-button label="2">指定订单</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <input v-model="order.sumPrice" type="text" class="price" placeholder="请输入总金额">
        <el-button type="primary" @click="submitOrder">提交并支付</el-button>
        <el-button type="success">保存草稿</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form></div>

</template>
<script>
import orderform from './components/orderForm.vue'
import { addSingleOrder } from '@/api/order'
export default {
  components: {
    orderform
  },
  data() {
    return {
      order: {
        type: 0,
        state: 0,
        trustMethod: 0,
        complationTime: '',
        employeeId: '', // 指定雇员id或抢单的id
        sumPrice: 0,
        tooths: [
          {
            outerNo: '', // 外部单号
            serviceType: 0,
            designTool: '不限', // 要求设计工具名称
            priceTemplateId: '', // 价格模板Id，可空
            toothList: [ // 牙位信息数组
              {
                topLeft: '', //  左上
                topRight: '', //  右上
                bottomLeft: '', // 左下
                bottomRight: '', // 右下
                price: 0, // 单价
                count: 0, // 数量
                sumPrice: 0, // 小计
                productId: '' // 产品Id, 必填
              }
            ],
            price: 0, // 所有牙位价格总和
            dataType: '数据模型', // 上传数据类型
            files: [ // 上传文件地址数组
            ],
            requirement: '', // 设计需求
            requirementFile: '' // 设计需求文件地址
          }
        ]
      },
      rules: {
        complationTime: [
          { required: true, message: '请选择交付时间', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitOrder() {
      const res = this.$refs.orderForm.validate()

      this.$refs.form.validate(valied => {
        if (valied && res) {
          console.log(this.order)
          addSingleOrder(this.order).then(res => {
            console.log(res)
          })
        } else {
          console.log('验证失败')
        }
      })
    }
  }
}
</script>

